<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>配置钉钉应用</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .mark {
            display: inline-block;
            width: 7px;
            height: 16px;
            border-radius: 3px;
            background-color: #0064FF;
            margin-right: 10px;
        }

        .flex {
            display: flex;
        }

        .align-center {
            align-items: center;
        }

        .el-input.is-disabled .el-input__inner {
            background-color: #F5F7FA;
            border-color: #E4E7ED;
            color: #606266;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <el-table :data="message_tableData" stripe border style="width: 100%" height="calc(100vh - 140px)">
            <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
            <el-table-column align="center" prop="Dingtalk_Message_SerialNumber" width="180"
                label="消息推送流水号"></el-table-column>
            <el-table-column align="center" prop="Dingtalk_Message_Name" width="180"
                label="消息推送名称"></el-table-column>
            <el-table-column prop="User_Name" label="推送人员">
                <template v-slot="{row}">
                    <el-tag v-for="(item,index) in row.User_Name.split('_')" :key="index">{{item}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="预览" width="220">
                <template v-slot="{row}">
                    <component :is="row.Msg_Key" :data="row.Msg_Param" preview></component>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
                <template v-slot="{row}">
                    <el-button type="success" size="small"
                        @click="Send(row.Dingtalk_Message_SerialNumber)">发送</el-button>
                    <el-dropdown size="small" trigger="click">
                        <el-button size="small" type="primary">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item style="margin-bottom: 5px;">
                                <el-button type="primary" size="small"
                                    @click="MessageEdit(row.Dingtalk_Message_SerialNumber)">配置</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item style="margin-bottom: 5px;">
                                <el-button type="danger" size="small"
                                    @click="MessageDelete(row.Dingtalk_Message_SerialNumber)">删除</el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 5px;" background @size-change="handleMessageSizeChange"
            @current-change="handleMessageCurrentChange" :current-page="message_form.page"
            :page-sizes="[10, 20, 30, 50]" :page-size="message_form.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="message_total">
        </el-pagination>
    </div>
    <script type="text/javascript" src="../../../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="js/Components.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>